<style>
.app-main{
  background: #f5f9ff;
}
#s{
  border-bottom-style:solid;
  border-width:1px;
  border-bottom-color: #939598;
  font-size: 15px;
  padding-top: 20px;
  padding-left: 22px;
  padding-bottom: 20px;
}
#s1{

  background: #2361bf;
  padding-left:5px;
  margin-right: 30px;

}
table{
  margin-left: 30px;
}
td{
  width: 350px;
  height: 50px;
}

#a1{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 260px;
  background: #FFFFFF;
}
#a2{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 200px;
  background: #FFFFFF;
}
#a3{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 430px;
  background: #FFFFFF;
}

#a4{
  margin: auto;
  margin-top: 20px;
  border-radius:5px;
  width: 1200px;
  height: 100px;
  background: #FFFFFF;
}

.a4{
  float:right;
  padding: 40px;
}

.s{
  width: 400px;
  height: 120px;
  float:left;
  padding-left: 40px;
}

.s1{
  width: 600px;
  height: 100px;
  padding-left: 40px;
}

.z{
  float:left;
  padding-left: 20px;
}



</style>

<template>
  <div>
    <div id="a1">
      <p id="s"><span id="s1"></span>费用信息</p>
      <table>
        <tr>
          <td>应收单号：{{form.receivableOrderNo}}</td>
          <td>订单号：{{form.orderNo}}</td>
          <td>运输费：{{form.transportationFee}}元</td>
          <td>保险费：{{form.insuranceFee}}元</td>
        </tr>
        <tr>
          <td>包装费：{{form.packagingFee}}元</td>
          <td>装卸费：{{form.handlingFee}}元</td>
          <td>中转费：{{form.transshipmentFee}}元</td>
          <td>燃油费：{{form.fuelFee}}元</td>
        </tr>
        <tr>
          <td>服务费：{{form.serviceFee}}元</td>
          <td>其他费用：{{form.otherFees}}元</td>
          <td>费用合计：{{form.transportationFee+form.insuranceFee+form.packagingFee+form.handlingFee+form.transshipmentFee+
          form.otherFees}}元</td>
        </tr>
      </table>
    </div>
    <div id="a2">
      <p id="s"><span id="s1"></span>应收</p>
      <table>
        <tr>
          <td>现付：{{form.cashOnDelivery}}元</td>
          <td>预付：{{form.prepaid}}元</td>
          <td>到付：{{form.collectOnDelivery}}元</td>
          <td>周期付：{{form.periodicPayment}}元</td>
        </tr>
        <tr>
          <td>应收合计：{{form.cashOnDelivery+form.prepaid+form.collectOnDelivery}}
          </td>
        </tr>
      </table>
    </div>
    <div id="a3">
      <p id="s"><span id="s1"></span>实收</p>
      <el-form ref="form" :model="form">
      <span class="s">
              <el-form-item label="现付" class="z" >
              <el-input v-model="cash" @blur="cao" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
      <span class="s">
             <el-form-item label="预付" class="z" >
              <el-input v-model="pre" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
      <span class="s">
             <el-form-item label="到付" class="z" >
              <el-input v-model="coll" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
      </span>
      <span class="s">
         <el-form-item label="周期付" class="z" >
              <el-input  clearable :disabled="true" ></el-input>
              </el-form-item>
      </span>
      <span class="s">
             <el-form-item label="实收合计" class="z" >
              <el-input  clearable :disabled="true" ></el-input>
              </el-form-item>
      </span>
      <p class="s1">
        <el-form-item label="备注" class="z">
        <el-input type="textarea"></el-input>
      </el-form-item>
      </p>
      </el-form>
    </div>

    <div id="a4">
      <div class="a4">
        <el-button @click="fan">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </div>

  </div>
</template>
<script>


import {addYsd, getYsd, updateYsd} from "@/api/ysd/ysd";

export default {
  data() {
    return {
      form:{},
      cash:null,
      pre:null,
      coll:null,
    }
  },
  methods: {
    cao(){
      if(this.cash>this.form.cashOnDelivery){
        this.$message.error("超出应收金额");
      }

    },
    findysd() {
      var id = this.$route.query.ids;
      getYsd(id).then(response => {
        this.form = response.data;

      });
    },
    fan() {
      this.$router.push({path: '/ysd'})
    },
    submitForm() {

      this.form.cashOnDelivery=this.cash;
      this.form.prepaid=this.pre;
      this.form.collectOnDelivery=this.coll;
      this.form.settlementStatus=1;
      this.form.settlementTime=new Date();
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateYsd(this.form).then(response => {
              this.$modal.msgSuccess("结算成功");
              this.$router.push({path: '/ysd'})
            });
          }
        }
      });
    }
  },
  created() {
    this.findysd();
    // alert(this.$route.query.ids)
  }
}
</script>

